<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[16, 16]">
    <div nz-col [nzLg]="6" [nzMd]="24" [nzSm]="24" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
      <app-dept-tree #deptTree (deptIdEven)="searchDeptIdUser($event)"></app-dept-tree>
    </div>
    <div nz-col [nzLg]="18" [nzMd]="24" [nzSm]="24" [nzXl]="18" [nzXs]="24" [nzXXl]="18">
      <nz-card class="m-b-10" nzHoverable [nzBodyStyle]="{ 'padding-bottom': 0 }">
        <form nz-form>
          <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24 }">
            <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
              <nz-form-item>
                <nz-form-label [nzFor]="">用户名称</nz-form-label>
                <nz-form-control>
                  <input name="userName" nz-input placeholder="请输入角色名称" [(ngModel)]="searchParam.userName" />
                </nz-form-control>
              </nz-form-item>
            </div>

            <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
              <nz-form-item>
                <nz-form-label [nzFor]="">手机</nz-form-label>
                <nz-form-control>
                  <input name="mobile" nz-input placeholder="请输入手机号" [(ngModel)]="searchParam.mobile" />
                </nz-form-control>
              </nz-form-item>
            </div>

            @if (!isCollapse) {
              <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
                <nz-form-item>
                  <nz-form-label [nzFor]="">是否启用</nz-form-label>
                  <nz-form-control>
                    <nz-select name="available" nzAllowClear nzPlaceHolder="下拉选择" [(ngModel)]="searchParam.available">
                      @for (item of availableOptions; track item) {
                        <nz-option [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                      }
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="0" [nzXl]="8" [nzXs]="0" [nzXXl]="8">
                <nz-form-item></nz-form-item>
              </div>
              <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="0" [nzXl]="8" [nzXs]="0" [nzXXl]="8">
                <nz-form-item></nz-form-item>
              </div>
            }

            <div class="text-right p-0 m-b-10" nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
              <button nz-button [nzType]="'primary'" (click)="getDataList({ pageIndex: 1 })">
                <i nz-icon nzType="search"></i>
                搜索
              </button>
              <button class="m-l-15" nz-button (click)="resetForm(); deptTree.resetTree()">
                <i nz-icon nzTheme="outline" nzType="close-circle"></i>
                重置
              </button>
              <a class="collapse operate-text" (click)="toggleCollapse()">
                @if (isCollapse) {
                  <span>展开</span>
                } @else {
                  <span>收起</span>
                }
                <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
              </a>
            </div>
          </div>
        </form>
      </nz-card>

      <app-card-table-wrap [btnTpl]="tableBtns" [tableTitle]="'账号列表'" (reload)="reloadTable()">
        <app-ant-table
          [checkedCashArrayFromComment]="checkedCashArray"
          [tableConfig]="tableConfig"
          [tableData]="dataList"
          (changePageIndex)="getDataList($event)"
          (changePageSize)="changePageSize($event)"
          (selectedChange)="selectedChecked($event)"
        ></app-ant-table>
        <ng-template #operationTpl let-$$dataItem="$$dataItem" let-id="id">
          <span *appAuth="ActionCode.AccountEdit" class="operate-text" (click)="edit(id, $$dataItem)">编辑</span>
          <span *appAuth="ActionCode.AccountDel" class="operate-text" (click)="del(id)">删除</span>
        </ng-template>
      </app-card-table-wrap>
    </div>
  </div>

  <ng-template #tableBtns>
    <button class="m-r-8" nz-button nzType="primary" (click)="add()">
      <i nz-icon nzType="plus"></i>
      新建
    </button>
    <button *appAuth="ActionCode.AccountDel" nz-button nzType="default" (click)="allDel()">
      <i nz-icon nzType="delete"></i>
      批量删除
    </button>
  </ng-template>

  <ng-template #availableFlag let-available="available" let-id="id">
    <nz-switch nzCheckedChildren="启用" nzUnCheckedChildren="禁用" [ngModel]="available" [nzControl]="true" [nzDisabled]="true"></nz-switch>
  </ng-template>
</div>
